<ui:composition template="../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="principal">
        <h2>Gerenciar Dentistas</h2>
        
        <h:form id="breadcrumb">
            <p:breadCrumb styleClass="navegacao" style="margin-top: 5px; margin-bottom: 40px">  
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'AD'}" >  
                    <p:menuitem value="Categories" url="../user-master/menuMaster.xhtml" />  
                </c:if>
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'DE'}" >  
                    <p:menuitem value="Categories" url="../user-simple/menuDentista.xhtml" />  
                </c:if>
                <p:menuitem value="Dentista" url="../dentista/adminDentista.xhtml" />  
                <p:menuitem value="Gerenciar Dentistas" url="gerenciarDentista.xhtml" />
            </p:breadCrumb>
        </h:form>

        <h:form id="cad">
            <p:growl id="message"/>
            <p:fieldset legend="DADOS CADASTRAIS" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="6" styleClass="table-form" cellspacing="10"> 
                    <h:outputLabel for="nome" value="*Nome: " />  
                    <p:inputText id="nome" title="nome" value="#{gerenciarDentistaMB.dentista.nome}" required="true" label="Nome" size="40" />
                    <h:outputLabel for="sobrenome" value="*Sobrenome: " />  
                    <p:inputText id="sobrenome" title="sobrenome" value="#{gerenciarDentistaMB.dentista.sobrenome}" required="true" label="Sobrenome" size="30"/>  
                    <h:outputLabel for="sexo" value="*Sexo: " />  
                    <p:selectOneMenu id="sexo" value="#{gerenciarDentistaMB.dentista.sexo}">  
                        <f:selectItem itemLabel="Sexo" noSelectionOption="true" />  
                        <f:selectItem itemLabel="Masculino" itemValue="M" />  
                        <f:selectItem itemLabel="Feminino" itemValue="F" /> 
                    </p:selectOneMenu>
                </h:panelGrid>

                <h:panelGrid columns="6" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="data" value="*Data de nascimento: " />  
                    <p:calendar locale="pt" id="data" title="data de nascimento" value="#{gerenciarDentistaMB.dentista.data_nascimento}" label="Data de nascimento" navigator="true" required="true" />
                    <h:outputLabel for="cpf" value="*CPF: " />  
                    <p:inputMask id="cpf" title="cpf" value="#{gerenciarDentistaMB.dentista.cpf}" required="true" mask="999.999.999-99"/>  
                    <h:outputLabel for="rg" value="*RG: " />  
                    <p:inputText id="rg" title="rg" value="#{gerenciarDentistaMB.dentista.rg}" required="true" label="RG" size="30"/>  
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="ENDEREÇO" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="logradouro" value="*Logradouro: " />  
                    <p:inputText id="logradouro" title="logradouro" value="#{gerenciarDentistaMB.dentista.endereco.logradouro}" required="true" label="Logradouro" size="80"/> 
                    <h:outputLabel for="numero" value="*Numero: " />  
                    <p:inputText id="numero" title="numero" value="#{gerenciarDentistaMB.dentista.endereco.numero}" required="true" label="Numero" size="5"/>
                </h:panelGrid>

                <h:panelGrid columns="6" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="complemento" value="Complemento: " />  
                    <p:inputText id="complemento" title="complemento" value="#{gerenciarDentistaMB.dentista.endereco.complemento}" required="false" label="Complemento" size="30"/>
                    <h:outputLabel for="bairro" value="*Bairro: " />  
                    <p:inputText id="bairro" title="bairro" value="#{gerenciarDentistaMB.dentista.endereco.bairro}" required="true" label="Bairro" size="30"/>
                    <h:outputLabel for="cep" value="*CEP: " />  
                    <p:inputMask id="cep" title="cep" value="#{gerenciarDentistaMB.dentista.endereco.cep}" required="true" mask="99999-999"/>
                </h:panelGrid>

                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="uf" value="*UF: " />  
                    <p:selectOneMenu id="uf" value="#{gerenciarDentistaMB.dentista.endereco.uf}" effect="fade" required="true" label="UF" style="width: 160px;" panelStyle="font-size: 12px;"> 
                        <f:selectItems value="#{gerenciarDentistaMB.estados}" var="uf" itemLabel="#{uf}" itemValue="#{uf}" />
                    </p:selectOneMenu>
                    <h:outputLabel for="cidade" value="*Cidade: " />  
                    <p:inputText id="cidade" title="cidade" value="#{gerenciarDentistaMB.dentista.endereco.cidade}" required="true" label="Cidade" size="30"/>
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="CONTATO" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="email" value="*Email: " />  
                    <p:inputText id="email" title="email" value="#{gerenciarDentistaMB.dentista.contato.email}" required="true" label="Email" size="50"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel for="telefone" value="*Telefone fixo: " />  
                    <p:inputMask id="telefone" title="telefone" value="#{gerenciarDentistaMB.dentista.contato.telefone}" required="true" mask="(99)9999-9999"/>
                    <h:outputLabel for="celular" value="Celular: " />  
                    <p:inputMask id="celular" title="celular" value="#{gerenciarDentistaMB.dentista.contato.celular}" required="false" mask="(99)9999-9999"/>
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="DADOS PROFISSIONAIS" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="cro" value="*CRO: " />  
                    <p:inputText id="cro" title="cro" value="#{gerenciarDentistaMB.dentista.cro}" required="true" label="CRO" size="30"/>
                </h:panelGrid>
                <h:panelGrid columns="3" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="cadastrar-especialidades" value="Escolher especialidades: " />
                    <p:selectCheckboxMenu id="cadastrar-especialidades" value="#{gerenciarDentistaMB.especialidadesSelecionadas}" label="Especialidades" filter="true" filterMatchMode="startsWith" scrollHeight="140">  
                        <f:selectItems value="#{gerenciarDentistaMB.especialidadesTodas}" var="esp" itemLabel="#{esp.nome}" itemValue="#{esp.id}" />  
                    </p:selectCheckboxMenu>
                    <p:dataTable id="especialidades" var="especialidade" value="#{gerenciarDentistaMB.dentista.especialidades}" style="width: 200px;" emptyMessage="Sem especialidades">  
                        <p:column headerText="Especialidades Cadastradas">  
                            <h:outputText value="#{especialidade.nome}" />  
                        </p:column>
                    </p:dataTable>
                </h:panelGrid>
                <p:separator/>
                <h:panelGrid columns="3" styleClass="table-form" cellspacing="10">
                    <p:commandButton id="modalDialogButton" value="Novas Especialidades" onclick="dlgEsp.show();" type="button" style="width: 190px;"/>  
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="CONTA DE USUÁRIO" toggleable="true" toggleSpeed="500" styleClass="grupo-form" rendered="#{gerenciarDentistaMB.cadastro}">
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="username" value="*Username: " />  
                    <p:inputText id="username" title="username" value="#{gerenciarDentistaMB.dentista.contaUsuario.username}" required="true" label="Username"/>

                    <h:outputLabel for="senha1" value="*Senha: " />
                    <p:password id="senha1" title="senha" value="#{gerenciarDentistaMB.senha1}" feedback="true"   
                                promptLabel="Preencha o campo com a senha desejada!" weakLabel="Senha fraca!"  
                                goodLabel="Boa senha!" strongLabel="Ótima senha!" styleClass="campoTexto" required="true" />

                    <h:outputLabel for="senha2" value="*Confirme a senha:"/>
                    <p:password id="senha2" title="confirme a senha" value="#{gerenciarDentistaMB.senha2}" feedback="true"   
                                promptLabel="Preencha o campo com a senha desejada!" weakLabel="Senha fraca!"  
                                goodLabel="Boa senha!" strongLabel="Ótima senha!" styleClass="campoTexto" required="true" /> 
                </h:panelGrid>
            </p:fieldset>
            <h:panelGrid columns="1" style="text-align: right; width: 100%;">
                <p:commandButton id="salvar" value="Salvar" update=":cad, :dados" action="#{gerenciarDentistaMB.salvarDentista}" image="ui-icon ui-icon-disk" style="font-size: 15px;" />
            </h:panelGrid>
        </h:form>
        <p:dialog id="especialidadesDialog" header="Nova Especialidade" widgetVar="dlgEsp" modal="true" showEffect="fade" hideEffect="fade">  
            <h:form>
                <h:panelGrid columns="1">
                    <h:outputLabel for="nome-esp" value="*Nome da Especialidade: " />  
                    <p:inputText id="nome-esp" value="#{gerenciarDentistaMB.especialidadeCadastrar.nome}" required="true" label="Especialidade" size="40"/>
                </h:panelGrid>
                <p:commandButton value="Salvar" update="nome-esp, :cad:message, :cad:cadastrar-especialidades" action="#{gerenciarDentistaMB.cadastrarEspecialidade}" image="ui-icon ui-icon-disk" style="float: right" oncomplete="dlgEsp.hide();"/>
            </h:form>
        </p:dialog>

        <p:separator style="margin-top: 20px; margin-bottom: 20px;"/>

        <h:form id="dados">
            <p:dataTable id="table-dentistas" value="#{gerenciarDentistaMB.dentistasTodos}" widgetVar="dentistaTable" var="dentista" tableStyle="width:100%" paginator="true" rows="10"  
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                         rowsPerPageTemplate="10,15,20,30" paginatorPosition="bottom" paginatorAlwaysVisible="false" emptyMessage="Sem dentistas cadastrados.">

                <f:facet name="header">  
                    DENTISTAS CADASTRADOS
                </f:facet>

                <p:column headerText="ID" sortBy="#{dentista.id}" filterMatchMode="contains" filterBy="#{dentista.id}" filterStyle="display:none;" >  
                    <h:outputText value="#{dentista.id}" />  
                </p:column>

                <p:column headerText="NOME COMPLETO" sortBy="#{dentista.nome}" filterMatchMode="contains" filterBy="#{dentista.nome}" filterStyle="display:none;">  
                    <h:outputText value="#{dentista.nome} #{dentista.sobrenome}" />  
                </p:column>

                <p:column headerText="CRO" sortBy="#{dentista.cro}" filterMatchMode="contains" filterBy="#{dentista.cro}" filterStyle="display:none;">  
                    <h:outputText value="#{dentista.cro}" />  
                </p:column>

                <p:column headerText="USERNAME" sortBy="#{dentista.contaUsuario.username}" filterMatchMode="contains" filterBy="#{dentista.contaUsuario.username}" filterStyle="display:none;">  
                    <h:outputText value="#{dentista.contaUsuario.username}" />  
                </p:column>

                <p:column style="width:40px">  
                    <p:commandButton id="selectButton" update=":dados:tabView" oncomplete="dentistaDialog.show()" icon="ui-icon-search" title="Ver">  
                        <f:setPropertyActionListener value="#{dentista}" target="#{gerenciarDentistaMB.dentistaSelecionado}" />
                    </p:commandButton>  
                </p:column>

                <f:facet name="footer">  
                    <p:outputPanel style="float: right">  
                        <h:outputText value="BUSCAR: " />  
                        <p:inputText id="globalFilter" onblur="dentistaTable.filter()" style="width:200px" />  
                    </p:outputPanel> 
                </f:facet>

            </p:dataTable>

            <p:blockUI block="table-dentistas" trigger="table-dentistas, :cad:salvar">  
                Carregando...<br />  
                <p:graphicImage library="images" name="loader.gif"/>  
            </p:blockUI>

            <p:dialog header="Detalhes do Dentista" widgetVar="dentistaDialog" resizable="false" id="dentistaDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">
                <p:tabView id="tabView" effect="fade" effectDuration="normal">
                    <p:tab id="tba1" title="Dados Cadastrais">
                        <h:panelGrid columns="2" cellpadding="10" width="600">
                            <h:graphicImage library="dentistas" name="dentista.jpg" class="img-pessoa"/>
                            <h:panelGrid columns="2" cellspacing="4"> 

                                <h:outputText value="NOME: " styleClass="rotulo" />
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.nome} #{gerenciarDentistaMB.dentistaSelecionado.sobrenome}" style="font-weight:bold"/>
                                <h:outputText value="DATA DE NASCIMENTO: " styleClass="rotulo" />
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.data_nascimento}"  style="font-weight:bold">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText> 
                                <h:outputText value="SEXO: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.sexo}" style="font-weight:bold"/>
                                <h:outputText value="CPF: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.cpf}" style="font-weight:bold"/>
                                <h:outputText value="RG: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.rg}" style="font-weight:bold"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab id="tba2" title="Endereço">
                        <h:panelGrid columns="2" cellpadding="10" width="600">
                            <h:graphicImage library="dentistas" name="dentista.jpg" class="img-pessoa"/>
                            <h:panelGrid columns="2" cellspacing="4">
                                <h:outputText value="LOGRADOURO: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.logradouro}" style="font-weight:bold"/>
                                <h:outputText value="NUMERO: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.numero}" style="font-weight:bold"/>
                                <h:outputText value="" />
                                <h:outputText value="" />

                                <h:outputText value="COMPLEMENTO: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.complemento}" style="font-weight:bold"/>
                                <h:outputText value="BAIRRO: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.bairro}" style="font-weight:bold"/>
                                <h:outputText value="CEP: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.cep}" style="font-weight:bold"/>
                                <h:outputText value="UF: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.uf}" style="font-weight:bold"/>
                                <h:outputText value="CIDADE: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.endereco.cidade}" style="font-weight:bold"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab id="tba3" title="Contato">
                        <h:panelGrid columns="2" cellpadding="10" width="600">
                            <h:graphicImage library="dentistas" name="dentista.jpg" class="img-pessoa"/>
                            <h:panelGrid columns="2" cellspacing="4">
                                <h:outputText value="EMAIL: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.contato.email}" style="font-weight:bold"/>
                                <h:outputText value="TELEFONE: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.contato.telefone}" style="font-weight:bold"/>
                                <h:outputText value="CELULAR: " styleClass="rotulo"/>
                                <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.contato.celular}" style="font-weight:bold"/>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab id="tba4" title="Dados Profissionais">
                        <h:panelGrid columns="2" cellpadding="10" width="600">
                            <h:graphicImage library="dentistas" name="dentista.jpg" class="img-pessoa"/>
                            <h:panelGrid columns="1" cellspacing="4">
                                <h:panelGrid columns="2" cellspacing="4">
                                    <h:outputText value="CRO: " styleClass="rotulo"/>
                                    <h:outputText value="#{gerenciarDentistaMB.dentistaSelecionado.cro}" style="font-weight:bold"/>
                                </h:panelGrid>
                                <p:dataTable id="especialidades" var="especialidade" value="#{gerenciarDentistaMB.dentistaSelecionado.especialidades}" style="width: 200px;" emptyMessage="Sem especialidades" >  
                                    <p:column headerText="Especialidades Cadastradas">  
                                        <h:outputText value="#{especialidade.nome}" />  
                                    </p:column>
                                </p:dataTable>
                            </h:panelGrid>
                        </h:panelGrid>

                    </p:tab>
                </p:tabView>
                <h:panelGrid columns="2" style="float: right">
                    <p:commandButton value="Excluir" onclick="confirmation.show()" icon="ui-icon-trash" type="button" />
                    <p:commandButton value="Atualizar" update=":cad" action="#{gerenciarDentistaMB.atualizarDentista()}" icon="ui-icon-refresh" oncomplete="dentistaDialog.hide();" />
                </h:panelGrid>
            </p:dialog>

            <p:confirmDialog id="confirmDialog" message="Tem certeza que deseja excluir o Dentista?" header="Excluir Dentista" severity="alert" widgetVar="confirmation">  
                <p:commandButton id="confirm" value="Confirmar" update=":dados, :cad" oncomplete="confirmation.hide()" action="#{gerenciarDentistaMB.excluirDentista()}" />  
                <p:commandButton id="decline" value="Cancelar" onclick="confirmation.hide()" type="button" />   
            </p:confirmDialog>
        </h:form>
    </ui:define>
</ui:composition>